<template>
  <div class="dex">
      <div class="land">
        <div class="banner">
          <div class="left">
            <h1>
              <!-- Frontrock DEX -->
            </h1>
            <div class="brief">
              FrontRock DEX provides fragmented investment opportunities for retail investors to invest and own a piece of their dream properties while earning appreciation on these properties.
            </div>
            <div class="buttons videos">
              <a @click="gotoDex()" href="javascript:;" class="start">Start trading</a>
              <a v-show="false" href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
          <div class="video">
              <!-- <div class="rock">
                <div class="l"></div>
                <div class="r"></div>
              </div> -->
              <div class="play"></div>
          </div>
        </div>
        <!-- <h1>
          Frontrock DEX
        </h1>
        <div class="brief">
          FrontRock DEX provides fragmented investment opportunities for retail investors to invest and own a piece of their dream properties while earning appreciation on these properties.
        </div>
        <br> -->


        <div class="land_page5_bg">
          <div class="arrow"></div>
          <div class="whatis">
            <!-- <p class="title">Trade properties on <br> Frontrock DEX</p>
            <p class="cont">Frontrock DEX is the place where you can buy and sell <br> different property tokens.</p> -->
            <tokens-card></tokens-card>
            <!-- <template slot-scope="scope"> -->

            <!-- <div class="buttons">
              <a href="javascript:;" class="start">Start trading</a>
              <a href="javascript:;" class="know-more">Know more</a>
            </div> -->
          </div>
        </div>

        <h1>
          LIGHTNING FAST AND SECURE <br> TRADE ON FRONTROCK DEX
        </h1>

        <div class="lightning">
          <div class="light">
            <p class="title">SPEED</p>
            <p class="cont">With ZK roll up layer 2 enhancement, the transaction on chain can be extremely efficient with minimum latency.</p>
          </div>
          <div class="light">
            <p class="title">FRAGMENTED OWNERSHIP </p>
            <p class="cont">Ownership is fragmented, enable lower barriers of entry and provide a fair opportunity for investors.</p>
          </div>
          <div class="light">
            <p class="title">SECURITY</p>
            <p class="cont">Data will be stored through thousands of different nodes through FrontRock Server, ensuring the security of the platform.</p>
          </div>
          <div class="light">
            <p class="title">PROFITABILITY</p>
            <p class="cont">Earning profit through various and diversified real estate derivatives, making lending and borrowing fun.</p>
          </div>
          <!-- <div class="cont-demo"></div> -->
          <div class="big-rock"></div>
        </div>

        <!-- <div class="land_page2_bg">
          <div class="info">
            <p class="t">FrontRock Marketplace</p>
            <p class="cont">Frontrock Marketplace makes it extraordinarily convenient for purchasers around the world to view and purchase fragmented real estate properties.</p>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <a href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
        </div> -->

        <div class="land_page3_bg">
          <!-- <div class="mountain"></div> -->
          <div class="info">
            <p class="t">WHAT HAPPENS AFTER THE TRADE? </p>
            <p class="cont">After you purchase the property tokens, you own the corresponding percentage of the property pegged to the token.</p>
            <!-- <img src="../assets/land3_demo_box.png" alt=""> -->
            
            <div class="cards">
              <div class="l">
                <div class="pic"></div>
                <div class="txt">
                  <p>REAL ESTATE INVESTORS</p>
                  <span>
                    If you purchased more than 10% <br><br>
                    Investors that own more than 10% of the property can use the frontrock platform to book the usage of the property.
                  </span>
                </div>
              </div>
              <div class="r">
                <div class="pic"></div>
                <div class="txt">
                  <p>PROPERTY PURCHASERS</p>
                  <span>
                    If you purchased 100% of the property<br><br>
                    Property purchaser can get the deed and complete ownership, or let Frontrock Foundation take care of it while still having full ownership and rights.
                  </span>
                </div>
              </div>
            </div>
            <!-- <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <a href="javascript:;" class="know-more">Know more</a>
            </div> -->
          </div>
        </div>

        <div class="more-trade">
          <div class="box">
            <h1>
              NEED MORE FRK TO TRADE?
            </h1>
            <div class="brief">
              Frontrock banking makes both borrowing and making yields simple. 
  Go to Frontrock banking to check out for more.
            </div>
            <div class="buttons">
              <a href="javascript:;" class="start">Start banking</a>
              <a @click="routePath(4)" href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
        </div>

        <div class="whatis" v-show="false">
          <div class="block">
            <div class="interact">
              <div class="ico"></div>
              <p class="t">Pegged to NFT</p>
              <p class="c">
                Frontrock Foundation uses smart contract to peg all properties to different NFT tokens, representing the property ownership.
              </p>
            </div>
            <div class="invest">
              <div class="ico"></div>
              <p class="t">Fragmented</p>
              <p class="c">
                The property will be fragmented into ERC 20 standard tokens, and the amount of fragmentation will be determined.
              </p>
            </div>
            <div class="bank">
              <div class="ico"></div>
              <p class="t">FRK/Property</p>
              <p class="c">
                These property tokens will then be paired with FRK, formulating a new LP pair, and be listed on the Frontrock DEX for exchange.
              </p>
            </div>
            <div class="invest">
              <div class="ico"></div>
              <p class="t">Traded on DEX</p>
              <p class="c">
                Users can now purchase fragmented or complete property ownership on the Frontrock DEX.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-key" v-show="false">
            <div class="land2_cloud"></div>
            <span class="l"></span>
            <span class="r"></span>
        </div>
        <!-- <div class="land_page4_bg" v-show="true">
          <div class="info">
            <p class="t">Hassle-free overseas investments</p>
            <p class="cont">Frontrock makes it possible for investors all over the world to easily invest in overseas properties.</p>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <a href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
          <div class="computer"></div>
          <div class="arrow"></div>
        </div> -->

      </div>
  </div>
</template>

<script>
  import tokensCard from './tokensCard'
  export default {
    data() {
      return {
        // isDetail: false,
        // isPop: false,
      }
    },
    components: {
      tokensCard
    },
    mounted() {
        console.log('dex:', this)
        // $('.lightning').querySelectorAll('.light').forEach((m,i)=> console.log(m.querySelector('.title').textContent.toUpperCase()))
    },
    methods: {
      routePath(i) {
        Bus.$emit('topbar', i)
      },
      gotoDex(){
        window.open('../frk-frontend/cryptorio/Dark/trading.html')
      },
      onProperEnter() {
        // this.isDetail = true
      },
      onProperLeave() {
        // this.isDetail = false
      },
      switchProperDetail(scope) {
        // console.log(arguments, this.isPop, scope)
        // this.isPop = !this.isPop
      },
      salesBuy() {
        console.log(Date());
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .dex {
    position: relative;
    text-align: center;
    // min-height: 400px;
    // max-width: 840px;
    // margin: 50px auto 0 auto;
    color: #fff;
    .land{
      font-family: Newsreader, serif;
      width: 100%;
      display: inline-block;
      .banner{
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width: 720px) {
          flex-direction: column;
        }
        .left{
          width: 30%;
          text-align: left;
          // h1{
          //   font-size: 36px;
          //   font-family: "Krona One", monospace;
          //   font-weight: 900;
          //   line-height: 52px;
          // }
          h1{
            font-size: 48px;
            font-weight: 900;
            line-height: 52px;
            background: url(../assets/logo_dex.png) no-repeat;
            background-size: auto 100%;
            width: 400px;
            height: 70px;
            margin: 0 0 33px 0;
            @media screen and (max-width: 640px) {
              font-size: 36px;
              line-height: 36px;
              margin:70px 0 33px 0;
            }
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            text-align: center;
            h1{
              font-size: 28px;
              line-height: 36px;
              width: 93%;
              display: inline-block;
            }
          }
          .brief{
            font-size: 18px;
            display: inline-block;
            line-height: 22px;
            letter-spacing: 1px;
              width: 90%;
              @media screen and (max-width: 720px) {
                width: 90%;
              }
          }
          // .brief{
          //   width: 618px;
          //   font-size: 18px;
          //   display: inline-block;
          //   // line-height: 22px;
          //   line-height: 6vh;
          //       @media screen and (max-width: 640px) {
          //         width: 90%;
          //         line-height: 26px;
          //       }
          // }
          .buttons{
            padding: 20px 0 0 0;
            a{
              width: 240px;
              text-align: center;
            }
          }
        }
        .video{
          background: url(../assets/market_video.jpeg);
          background-size: 100% auto;
          width: 536px;
          height: 358px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          // margin: 64px 0 0 0;
          border-radius: 48px;
          //   flex-direction: row;
          position: relative;
          .play{
              background: url(../assets/video_play.png);
              background-size: 100% auto;
              width:97px;
              height:97px;
              cursor: pointer;
          }
          &:after{
            // content: '';
            position: absolute;
            left: 100px;
            right: 100px;
            bottom: -100px;
            height: 1px;
            background: #fff;
          }
          @media screen and (max-width: 640px) {
            width: 300px;
            height: 200px;
            border-radius: 20px;
            .play{
              transform: scale(.7);
            }
          }
        }
        // .video{
        //     background: url(../assets/market_video.jpeg);
        //     background-size: 100% auto;
        //     width: 536px;
        //     height: 358px;
        //     display: inline-flex;
        //     align-items: center;
        //     justify-content: center;
        //     margin: 64px 0 0 0;
        //     border-radius: 48px;
        //     position: relative;
        //   //   flex-direction: row;
        //     .play{
        //         background: url(../assets/video_play.png);
        //         background-size: 100% auto;
        //         width:97px;
        //         height:97px;
        //         cursor: pointer;
        //     }
        //     @media screen and (max-width: 640px) {
        //       width: 300px;
        //       height: 200px;
        //       border-radius: 20px;
        //       .play{
        //         transform: scale(.7);
        //       }
        //     }
        //   .rock{
        //     // position: absolute;
        //     .l, .r{
        //       background: url(../assets/land3_rock.png) no-repeat;
        //       background-size: 100% auto;
        //       position: absolute;
        //       width: 320px;
        //       height: 400px;
        //     }
        //     .l{
        //       bottom: -150px;
        //       left: -280px;
        //     }
        //     .r{
        //       bottom:-200px;
        //       right: -250px;
        //       transform: scale(1.2) rotateZ(20deg) rotateY(-180deg);
        //     }
        //       @media screen and (max-width: 640px) {
        //         .l{
        //           bottom: -200px;
        //           left: -170px;
        //           transform: scale(.5);
        //         }
        //         .r{
        //           bottom: -200px;
        //           left: 150px;
        //           transform: scale(.7) rotateZ(20deg) rotateY(-180deg);
        //         }
        //       }
        //   }
        // }
      }
      // h1{
      //   font-size: 48px;
      //   font-weight: 900;
      //   line-height: 52px;
      //   @media screen and (max-width: 640px) {
      //     font-size: 36px;
      //     line-height: 36px;
      //   }
      // }
      // .brief{
      //   width: 618px;
      //   font-size: 18px;
      //   display: inline-block;
      //   // line-height: 22px;
      //   line-height: 6vh;
      //       @media screen and (max-width: 640px) {
      //         width: 90%;
      //         line-height: 26px;
      //       }
      // }
      // .video{
      //     background: url(../assets/market_video.jpeg);
      //     background-size: 100% auto;
      //     width: 536px;
      //     height: 358px;
      //     display: inline-flex;
      //     align-items: center;
      //     justify-content: center;
      //     margin: 64px 0 0 0;
      //     border-radius: 48px;
      //     position: relative;
      //   //   flex-direction: row;
      //     .play{
      //         background: url(../assets/video_play.png);
      //         background-size: 100% auto;
      //         width:97px;
      //         height:97px;
      //         cursor: pointer;
      //     }
      //     @media screen and (max-width: 640px) {
      //       width: 300px;
      //       height: 200px;
      //       border-radius: 20px;
      //       .play{
      //         transform: scale(.7);
      //       }
      //     }
      //   .rock{
      //     // position: absolute;
      //     .l, .r{
      //       background: url(../assets/land3_rock.png) no-repeat;
      //       background-size: 100% auto;
      //       position: absolute;
      //       width: 320px;
      //       height: 400px;
      //     }
      //     .l{
      //       bottom: -150px;
      //       left: -280px;
      //     }
      //     .r{
      //       bottom:-200px;
      //       right: -250px;
      //       transform: scale(1.2) rotateZ(20deg) rotateY(-180deg);
      //     }
      //       @media screen and (max-width: 640px) {
      //         .l{
      //           bottom: -200px;
      //           left: -170px;
      //           transform: scale(.5);
      //         }
      //         .r{
      //           bottom: -200px;
      //           left: 150px;
      //           transform: scale(.7) rotateZ(20deg) rotateY(-180deg);
      //         }
      //       }
      //   }
      // }

      .whatis{
        // border: 1px dashed white;
        // border-radius: 100px;
        border-top: 2px solid white;
        margin: 19% 0 50px 0;
        color:#F6F5F5;
        padding: 50px;
        @media screen and (max-width: 640px) {
          padding: 50px 0;
        }
        display: inline-block;
        // width: 58%;
        // max-width: 976px;
        p{
          margin: 0;
        }
        .title{
          font-size: 42px;
          line-height: 42px;
        }
        .cont{
          width: 80%;
          display: inline-block;
          margin: 40px 0 64px 0;
        }
        .block{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          >div{
            cursor: pointer;
            display: initial;
            // background: rgba(255, 255, 255, 0.13);
            border-radius: 20px;
            width: 17%;
            padding: 40px 15px;
            .ico{
              width: 85px;
              height: 85px;
              background: url(../assets/land_sub1.png);
              background-size: 100% auto;
              background-repeat: no-repeat;
              display: inline-block;
            }
            .t{
              font-size: 16px;
              line-height: 25px;
              font-weight: 900;
              font-family: "Krona One", monospace;
              margin: 16px 0 24px 0;
            }
            .c{
              font-size: 15px;
              line-height: 18px;
              font-weight: normal;
              color: #e0e0e0;
            }
            &.interact{
              .ico{
              }
              .t{
              }
              .c{
              }
            }
            &.invest{
              .ico{
              background-image: url(../assets/land_sub2.png);
              }
              .t{
              }
              .c{
              }
            }
            &.bank{
              .ico{
                background-image: url(../assets/land_sub3.png);
              }
              .t{
              }
              .c{
              }
            }
          }
        }
      }

      .bg-key{
        position: relative;
            background-image: url(../assets/land2_cloud.png);
            background-size: 100% auto;
            width: 100%;
            min-height: 660px;
            .land2_cloud{
                // width: ;
            }
        .l, .r{
          position: absolute;
          width: 43%;
          height: 350px;
          background-size: 100% auto;
          background-repeat: no-repeat;
          &.l{
            background-image: url(../assets/key_l.png);
            left: 270px;
            top: 240px;
          }
          &.r{
            background-image: url(../assets/key_r.png);
            right: 310px;
            top: -50px;
            width: 29%;
          }
        }
      }
      @media screen and (max-width: 640px) {
        h1{
          width: 90%;
          font-size: 24px;
          display: inherit;
          line-height: 30px;
        }
      }
      .lightning{
        height: 700px;
        padding: 50px 30px;
        margin: 30px 0 0px 0;
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: left;
        flex-wrap: wrap;
        .light{
          width: 31%;
          margin: 0px 0 23px 145px;
          position: relative;
          &:before{
            content: '';
            position: absolute;
            left: -145px;
            top: 0px;
            width: 100px;
            height: 100px;
            background: url(../assets/land_sub1.png);
            background-size: 100% auto;
          }
            &:nth-child(even){
              // filter: hue-rotate(100deg) saturate(20);
              &:before{
                background-image: url(../assets/land_sub1_olive.png);
              }
            }
          .title{
            font-family: "Krona One", monospace;
            font-size: 24px;
            margin: 8px 0;
          }
          .cont{
            color: #F6F5F5;
            opacity: .6;
            font-size: 22px;
            line-height: 35px;
          }
        }
        .cont-demo{
          width: 100%;
          height: 600px;
          background: url(../assets/land3_lightning.png) no-repeat;
          background-size: auto 100%;
          position: absolute;
          opacity: .2;
          @media screen and (max-width: 640px) {
            background-size: auto 92%;
          }
        }
        .big-rock{
          position: absolute;
          width: 700px;
          height: 550px;
          background: url(../assets/land3_mountain.png) no-repeat;
          background-size: 100% 100%;
          right: 0px;
          bottom: 0px;
          @media screen and (max-width: 640px) {
            right: initial;
            bottom: -200px;
            transform: scale(.7);
            left: -200px;
          }
        }
        @media screen and (max-width: 640px) {
          height: auto;
          margin:0px 0 130px 0;
          padding:40px 30px 280px 30px;
          text-align: center;
          .light{
            width:100%;
            margin:0px 0 50px 0px;
            padding-top: 100px;
            &:before{
              left: 50%;
              top:-10px;
              transform: translateX(-50%);
            }
            .title{
              font-size: 18px;
            }
            .cont{
              font-size: 16px;
              line-height: 25px;
            }
          }
        }
      }

      .land_page2_bg{
        background: url(../assets/land_page2_bg.jpeg) no-repeat;
        background-size: auto 100%;
        height: 800px;
        margin-top: 200px;
        display: flex;
        align-items: center;
        // flex-direction: row;
        color: #070F4E;
        .info{
          width: 363px;
          text-align: left;
          padding: 20px 90px;
          line-height: 48px;
          .t{
            font-size: 48px;
            font-weight: 900;
          }
          .cont{
            line-height: 26px;
            margin: 28px 0 0 0;
          }
          .buttons{
            text-align: center;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              width: 45%;
              @media screen and (max-width: 640px) {
                width: 90%;
              }
              &.know-more{
                border-color: #EF6566;
                color: #EF6566;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
      }

      .land_page3_bg{
        background: #F6F5F5;
        // height: 612px;
        // display: flex;
        // align-items: center;
        // flex-direction: row;
        // margin: 0 0 80px 0;
        color: #070F4E;
        .mountain{
          background: url(../assets/land2_estate_mountain.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 520px;
          margin: -50px 30px 0 30px;
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 320px;
          margin: 0 0 0 30px;
        }
        .info{
          // width: 363px;
          // text-align: left;
          padding: 80px 0px 20px 0;
          line-height: 48px;
          @media screen and (max-width: 640px) {
            width: 95%;
            display: inline-block;
          }
          .t{
            font-size: 45px;
            font-weight: 900;
            margin: 0;
            @media screen and (max-width: 720px) {
              font-size: 36px;
            }
          }
          .cont{
            width: 500px;
            line-height: 26px;
            margin: 23px 0 0 0;
            display: inline-block;
            color:#070F4E;
            @media screen and (max-width: 720px) {
              width: 90%;
            }
          }
          .cards{
            // width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin:20px 0;
            >div{
              width: 40%;
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              background: white;
              border-radius: 23px;
              line-height: 20px;
              margin: 25px 20px 60px 25px;
              padding: 30px 0 40px 0;
              min-height: 183px;
              .pic{
                width: 160px;
                height: 160px;
                background: url(../assets/dex_card_person.png) no-repeat;
                background-size: auto 100%;
              }
              .txt{
                width: 55%;
                font-family: "Krona One", monospace;
                text-align: left;
                // height: 50vh;
                p{
                  font-size: 18px;
                  margin:25px 0 0px 0;
                }
                span{
                  font-family: Newsreader, serif;
                  font-size: 14px;
                }
              }
              &.l{
                
              }
              &.r{
                .pic{
                  background-position: -160px 0;
                }
              }
            }
            @media screen and (max-width: 720px) {
              flex-direction: column;
              justify-content: space-around;
              // align-items: center;
              >div{
                width: 87%;
                flex-direction: column;
                // align-items: center;
                // background: white;
                // border-radius: 10px;
                // line-height: 20px;
                margin: 15px 0;
                min-height: auto;
                // padding: 30px 0;
                .pic{
                  width: 160px;
                  height: 160px;
                  // background-size: auto 100%;
                }
                .txt{
                  width: 85%;
                  // height: auto;
                  // text-align: left;
                  // margin:25px 0 0px 0;
                  p{
                    font-size: 16px;
                  }
                  span{
                    font-size: 14px;
                  }
                }
                &.l{
                  
                }
                &.r{
                  .pic{
                    background-position: -160px 0;
                  }
                }
              }
            }
          }
          .buttons{
            text-align: center;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              width:45%;
          @media screen and (max-width: 720px) {
            width: 90%;
          }
              &.know-more{
                border-color: #EF6566;
                color: #EF6566;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
      }

      .more-trade{
        background: white;
        // padding: 50px 50px 80px 50px;
        padding: 70px 50px 130px 50px;
        margin-bottom: 80px;
          @media screen and (max-width: 640px) {
            padding: 50px 20px 80px 20px;
          }
        .box{
          border-radius: 20px;
          background: #070F4E;
          padding: 30px 0;
          @media screen and (max-width: 640px) {
            padding: 20px;
          }
          h1{
            line-height: 20px;
            font-size: 36px;
            @media screen and (max-width: 640px) {
              line-height: 36px;
              font-size: 26px;
            }
          }
          .buttons{
            padding: 30px 0 15px 0;
            .start{
              border-color: #FBB627;
              background: #FBB627;
            }
            .know-more{
              color:#FBB627;
              border-color: #FBB627;
              &:hover{
                background-color: rgba(251, 182, 39, .1);
              }
            }
            @media screen and (max-width: 640px) {
              a{
                width: 100%;
                margin: 8px 0;
              }
            }
          }
        }
      }

      .land_page4_bg{
        // background: white;
        height: 800px;
        display: flex;
        align-items: center;
        // flex-direction: row;
        // color: #070F4E;
        color: #fff;
        position: relative;
        .arrow{
          position: absolute;
          background: url(../assets/land_page4_arrow.png) no-repeat;
          background-size: 100% auto;
          width: 180px;
          height: 150px;
          bottom: 80px;
          right: 585px;
        }
        .info{
          width: 390px;
          text-align: left;
          padding: 20px 90px;
          line-height: 48px;
          .t{
            font-size: 48px;
            font-weight: 900;
            margin: 0;
          }
          .cont{
            line-height: 26px;
            margin: 23px 0 0 0;
          }
          .buttons{
            text-align: center;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              width: 45%;
          @media screen and (max-width: 640px) {
            width: 90%;
          }
              &.know-more{
                border-color: #EF6566;
                color: #EF6566;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 550px;
          height: 310px;
          margin: 0 30px 0 0px;
        }
      }

      .land_page5_bg{
        background: white;
        color: #070F4E;
        position: relative;
        border-radius: 118px;
        max-width: 1094px;
        margin: 120px 0 200px 0;
        display: inline-block;
        @media screen and (max-width: 640px) {
          border-radius:58px;
          margin:120px 0 100px 0;
        }
        .arrow{
          position: absolute;
          background: url(../assets/land_page4_arrow.png) no-repeat;
          background-size: 100% auto;
          width: 180px;
          height: 150px;
          top: -180px;
          left: 260px;
            @media screen and (max-width: 640px) {
              left: 0;
              top: -130px;
              transform: scale(.6);
            }
        }
        .whatis{
          color: #070F4E;
          color: inherit;
          width: auto;
          max-width: initial;
          margin: 1% 0 0px 0;
          border:none;
          .title{
            font-weight: 900;
          }
          .cont{
            color: #20336B;
            font-size: 18px;
            line-height: 18px;
            margin: 30px 0 50px 0;
          }
          .buttons{
            padding: 40px 0 0 0;
            .start, .know-more{
                // width: 180px;
                width: 45%;
                @media screen and (max-width: 640px) {
                  width: 90%;
                }
            }
            .know-more{
              border:1px solid #EF6566;
              color: #EF6566;
              &:hover{
              }
            }
          }
        }
      }

      .buttons{
        // width: 40%;
        padding: 80px 0;
        &.videos{
          padding: 100px 0 80px 0;
        }
        .start, .know-more{
          // width: 240px;
          width: 18%;
          height: 40px;
          line-height: 35px;
          box-sizing: border-box;
          border: 2px solid #5BCB93;
          box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
          border-radius: 44px;
          color: white;
          font-family: "Krona One", monospace;
          font-size: 14px;
        //   font-weight: bold;
          text-decoration: none;
          display: inline-block;
          margin: 0 8px;
          &.start{
            background: #5BCB93;
            &:hover{
              filter: brightness(1.1);
            }
          }
          &.know-more{
            border:1px solid rgba(239, 101, 102, 1);
            color: rgba(239, 101, 102, 1);
            &:hover{
              background: rgba(239, 101, 102, .1);
              // background: #EF6566;
              // border: 1px solid transparent;
            }
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            margin:20px 0 60px 0;
          }
        }
      }
    }
  }

@media only screen and (min-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r{
      font-size: 38px;
      em{
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}

@media only screen and (max-width: 1440px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r{
      font-size: 30px;
      em{
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}

@media only screen and (max-width: 640px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}

@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>
